<template>
  <div>
    <div class="goodscontainer">
      <div class="goodsHead">
        <div class="goodsHead-left">{{ mytitle }}</div>
        <div class="goodsHead-right">
          <a
            href="javascript:void(0)"
            :class="[activeId == 0 ? 'active' : '']"
            @click="isActive(0)"
            >新品上市</a
          >
          <a
            href="javascript:void(0)"
            :class="[activeId == 1 ? 'active' : '']"
            @click="isActive(1)"
            >热销单品</a
          >
          <a
            href="javascript:void(0)"
            :class="[activeId == 2 ? 'active' : '']"
            @click="isActive(2)"
            >降价风潮</a
          >
        </div>
      </div>
      <div class="goodsBody">
        <!-- 新品上市 -->
        <div
          class="goodsBody-item"
          v-for="(item, index) in topList"
          :key="item.id"
          v-show="activeId == 0"
          v-if="index < 9"
          @click="goDetail(item.sid)"
        >
          <img :src="`/images` + item.simage" alt="" />
          <div class="detPrice">
            <h2>{{ item.sname }}</h2>
            <h3>{{ item.sdetail }}</h3>
            <h1>￥{{ item.sprices }}</h1>
          </div>
        </div>
        <!-- 热销单品 -->
        <div
          class="goodsBody-item"
          v-for="(item, index) in topList"
          :key="item.id"
          v-show="activeId == 1"
          @click="goDetail(item.id)"
          v-if="index > 6 && index < 15"
        >
          <img :src="`/images` + item.simage" alt="" />
          <div class="detPrice">
            <h2>{{ item.sname }}</h2>
            <h3>{{ item.sdetail }}</h3>
            <h1>￥{{ item.sprices }}</h1>
          </div>
        </div>

        <!-- 降价风潮 -->
        <div
          class="goodsBody-item"
          v-for="(item, index) in topList"
          :key="item.id"
          v-show="activeId == 2"
          @click="goDetail(item.id)"
          v-if="index > 9 && index < 19"
        >
          <img :src="`/images` + item.simage" alt="" />
          <div class="detPrice">
            <h2>{{ item.sname }}</h2>
            <h3>{{ item.sdetail }}</h3>
            <h1>￥{{ item.sprices }}</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      sgender: "man",
      topWay: "",
      // bid: "",
      activeId: 0,
      productList: [
        {
          id: 1,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 2,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 3,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 4,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 5,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 6,
          imgUrl: "/images/shoes.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
      ],
      productList1: [
        {
          id: 9,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
        {
          id: 10,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
        {
          id: 11,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
        {
          id: 12,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
        {
          id: 13,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
        {
          id: 14,
          imgUrl: "/images/shoes3.jpg",
          deth: "婴童运动童鞋",
          deth2: "Nike Huarache Run SE (TD)",
          deth3: "1种颜色",
          price: 233,
        },
      ],
      productList2: [
        {
          id: 15,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 16,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 17,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 18,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 19,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
        {
          id: 20,
          imgUrl: "/images/shoes1.jpg",
          deth2: "这是一双洞洞鞋",
          deth: "老少咸宜",
          deth3: "多种颜色",
          price: 333,
        },
      ],
    };
  },
  props: ["mytitle", "topList"],
  mounted() {
    // console.log(myTitle);
    // this.getGoodsData(this.mytitle, "新品上市");
    this.$store.dispatch("getFemaleShoesTop");
  },
  methods: {
    goDetail(sid) {
      // console.log(bid);
      // if (bid) {
      let location = {
        name: "detail",
        query: { sid: sid || undefined },
      };
      this.$router.push(location);
      // }
    },
    isActive(num) {
      console.log(num);
      if (num == 0) {
        this.activeId = 0;
      } else if (num == 1) {
        this.activeId = 1;
      } else if (num == 2) {
        this.activeId = 2;
      }
    },
    getTopList() {
      if (this.mytitle == "精品女鞋") {
        this.$store.dispatch("getFemaleShoesTop");
      } else {
        this.$store.dispatch("getManShoesTop");
      }
    },
  },
  computed: {
    ...mapState({
      femaletop: (state) => state.home.femaletop,
    }),
  },
};
</script>

<style lang="less" scoped>
// 商品列表
.goodscontainer {
  width: 1200px;
  margin: 10px auto;
  // height: 1000px;
  //   display: flex;
  // background-color: antiquewhite;
  .goodsHead {
    width: 100%;
    .goodsHead-left {
      float: left;
      font-size: 20px;
      padding: 10px;
    }
    .goodsHead-right {
      font-size: 16px;
      float: right;
      padding: 10px;
      .active {
        color: rgb(3, 138, 143);
        border-bottom: 6px solid rgb(3, 138, 143);
      }
      a {
        margin-left: 10px;
        text-decoration: none;
        border-radius: 4px;
        padding: 5px;
      }
      a:hover {
        color: rgb(3, 138, 143);
      }
    }
  }
  .goodsBody {
    clear: both;
    // background-color: rgb(250, 250, 250);
    height: 100%;
    .goodsBody-item {
      margin: 20px;
      width: 357px;
      // border: 1px solid rgb(230, 230, 230);
      border-radius: 10px;
      /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
      box-shadow: 1px 1px 15px rgb(214, 217, 218);
      display: inline-block;
      img {
        width: 300px;
        height: 300px;
        // margin: auto;
        margin-left: 30px;
        margin-top: 20px;
      }
      .detPrice {
        // background: pink;
        padding: 20px;
        text-align: left;
        h1 {
          font-size: 20px;
          color: rgb(1, 105, 109);
          font-weight: 400;
        }
        h2 {
          font-size: 20px;
          font-weight: 400;
          color: #000;
          margin: 10px 0;
        }
        h3 {
          font-size: 18px;
          font-weight: 400;
          margin: 5px 0;
          color: #000;
        }
      }
    }
  }
}
</style>